<template>
  <div class="top-author m-t-2 bg-w">
    <div class="title fx-h-c">
      <span>🎖️作者榜</span>
    </div>
    <ul class="authors">
      <AuthorItem :msg="{avatarUrl: 'https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/9ecb4e119c26e64b8b4ec5258f159b3b~300x300.image',
      author: '三余',
      levelUrl: '',
      text: '「前端进阶之路」公众号|HUAWEI',
      }"></AuthorItem>
      <AuthorItem :msg="{avatarUrl: 'https://mirror-gold-cdn.xitu.io/168e08c0044e01e5f78?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
      author: '孟祥_成都',
      levelUrl: '',
      text: ' 前端开发（成都） @ 滴滴出行 ',
      }"></AuthorItem>
      <AuthorItem :msg="{avatarUrl: 'https://mirror-gold-cdn.xitu.io/1729ec3cf2191866ece?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
      author: '明洁',
      levelUrl: '',
      text: '前端工程师 @ M78星云',
      }"></AuthorItem>
    </ul>
    <div class="more fx-c cs">
        <span>完整榜单</span>
        <a-icon type="right" />
    </div>
  </div>
</template>

<script>
import AuthorItem from "@/components/main/aside/topAuthor/AuthorItem";
export default {
  name: "TopAuthor",
  components: {
    AuthorItem,
  },
};
</script>

<style lang="scss" scoped>
.top-author {
  height: 29.4rem;
  .title {
    height: 4.2rem;
    padding: 0.5rem 1.5rem;
    font-size: 1.4rem;
    border-bottom: 1px solid #eaeaea;
  }
  .authors {
    padding: 1.3rem;
  }
  .more {
      height: 5.1rem;
      color: #007fff;
      font-size: 1.4rem;
      border-top: 1px solid #eaeaea;
      span {
          margin-right: 0.5rem;
      }
  }
}
</style>